<template>
  <div class="login_container">
    <el-form ref="form" :model="form" label-width="0px" class="login_form" :rules="loginFormRules">
      <el-form-item prop="username">
        <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" prefix-icon="el-icon-s-cooperation"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="resetLoginForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        loginFormRules: {
          username: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
            required: true,
            message: '请输入用户密码',
            trigger: 'blur'
          }, {
            min: 6,
            max: 8,
            message: '长度在 6 到 8 个字符',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate(async valid => {
          // console.log(valid)
          if (!valid) return
          const {
            data: res
          } = await this.$axios.post('/login', this.form)
          // console.log(res)
          if (res.code != 200) return this.$message.error('用户名或密码输入错误!!!');
          this.$router.push('/home')
        })
      },
      resetLoginForm() {
        this.$refs.form.resetFields()
      }
    }
  }
</script>

<style scoped="scoped">
  .login_container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    border: #3A8EE6 solid 1px;
    border-radius: 3px;
  }

  .login_form {
    position: relative;
    top: 25%;
    padding: 0 20px;
  }
</style>
